<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<link rel="stylesheet" type="text/css" href="css/uname.css"/>
	</head>
	<body style="background-color: #FFFFFF;">
		<div class="left">
			<img src="img/left.png">
		</div>
		<div class="top">
			<div class="logo">
				<img src="favicon.ico">小米账号
			</div>
			<div class="nav">
				<ul>
					<li><a href="">用户协议</a></li>
					<li><a href="">隐私政策</a></li>
					<li><a href="">帮助中心</a><span style="margin-left: 20px;">|</span></li>
					<li><a href="">中文(简体)</a></li>
				</ul>
			</div>
		</div>

		<div class="form">
			<div class="img">
				<img id="image" src="img/Snipaste_2021-06-16_15-45-38%20拷贝.png">
			</div>
			<div class="form_top">
				<strong style="border-bottom: 3px coral solid;" id="form_1">登录</strong><strong id="form_2" style="margin-left: 20px;">注册</strong>
			</div>
			<div class="form_item1">
				<form action="" method="">
					<input class="from_box" type="text" name="" id="" value="" placeholder="邮箱/手机号码/小米ID" />
					<input class="from_box" type="password" name="" id="" value="" placeholder="密码" />
					<button class="from_box" type="button">登录</button>
				</form>
				<p><span>忘记密码?</span><span style="float: right;">手机号登录</span></p>
				<div class="form_foot">
					<img src="img/denglu.png" height="100px" style="margin-top: 80px;">
				</div>
			</div>
			<div class="form_item2">
				<input class="from_box" type="text" name="" id="" value="" placeholder="地区/国家" />
				<input class="from_box" type="text" name="" id="" value="" placeholder="手机号" />
				<input class="from_box" type="text" name="" id="" value="" placeholder="短信验证码" />
				<button class="from_box" type="button">注册</button>
				<p><span>忘记密码?</span><span style="float: right;">手机号登录</span></p>
				<div class="form_foot">
					<img src="img/denglu.png" height="100px" style="margin-top: 40px;" >
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var form_1 = document.getElementById('form_1');
			var form_2 = document.getElementById('form_2');
			var form_item1 = document.querySelector('.form_item1');
			var form_item2 = document.querySelector('.form_item2');

			form_1.onclick = function() {
				form_1.style.borderBottom = 'coral 3px solid';
				form_2.style.borderBottom = 'none';
				form_item1.style.display = 'block';
				form_item2.style.display = 'none';
			}
			form_2.onclick = function() {
				form_2.style.borderBottom = 'coral 3px solid';
				form_1.style.borderBottom = 'none';
				form_item2.style.display = 'block';
				form_item1.style.display = 'none';
			}
		</script>
	</body>
</html>
